<template>
    <div class="ratings">
        <div class="ratings-scroll">
            <div class="ratings-score">
                <div class="ratings-score-left">
                    <span>{{ sellerData.score.toFixed(1) }}</span>
                    <span>综合评分</span>
                    <span>高于周边商家96%</span>
                </div>
                <div class="ratings-score-right">
                    <p>
                        <span>服务态度</span>
                        <van-rate
                            v-model="service"
                            allow-half
                            void-icon="star"
                            void-color="#eee"
                            color="#ff9a02"
                        />
                    </p>
                    <p>
                        <span>菜品质量</span>
                        <van-rate
                            v-model="mass"
                            allow-half
                            void-icon="star"
                            void-color="#eee"
                            color="#ff9a02"
                        />
                    </p>
                    <p>
                        <span>送达时间</span>
                        <b>{{ sellerData.deliveryTime }}分钟</b>
                    </p>
                </div>
            </div>
            <div class="ratings-nav">
                <van-tabs type="card" color="#ffc300">
                    <van-tab title="全部24">
                        <div
                            class="ratings-nav-all"
                            v-for="item in shopRatings"
                            :key="item.rateTime"
                        >
                            <div class="ratings-nav-all-left">
                                <img :src="item.avatar" alt="" />
                            </div>
                            <div class="ratings-nav-all-right">
                                <p>
                                    <b>{{ item.username }}</b>
                                    <span>{{ item.rateTime |formatDateTime}}</span>
                                </p>
                                <p>
                                    <van-rate
                                        v-model="item.score"
                                        allow-half
                                        void-icon="star"
                                        void-color="#eee"
                                        color="#ff9a02"
                                    />&nbsp; {{ item.deliveryTime }}分钟送达
                                </p>
                                <p>
                                    {{ item.text }}
                                </p>
                                <p>
                                    <van-tag
                                        plain
                                        type="primary"
                                        text-color="#a9a9a9"
                                        v-for="label in item.recommend"
                                        :key="label"
                                    >
                                        {{ label }}
                                    </van-tag>
                                </p>
                            </div>
                        </div>
                    </van-tab>
                    <van-tab title="满意18">
                        <div
                            class="ratings-nav-all"
                            v-for="item in meet"
                            :key="item.rateTime"
                        >
                            <div class="ratings-nav-all-left">
                                <img :src="item.avatar" alt="" />
                            </div>
                            <div class="ratings-nav-all-right">
                                <p>
                                    <b>{{ item.username }}</b>
                                    <span>{{ item.rateTime |formatDateTime}}</span>
                                </p>
                                <p>
                                    <van-rate
                                        v-model="item.score"
                                        allow-half
                                        void-icon="star"
                                        void-color="#eee"
                                        color="#ff9a02"
                                    />&nbsp; {{ item.deliveryTime }}分钟送达
                                </p>
                                <p>
                                    {{ item.text }}
                                </p>
                                <p>
                                    <van-tag
                                        plain
                                        type="primary"
                                        text-color="#a9a9a9"
                                        v-for="label in item.recommend"
                                        :key="label"
                                    >
                                        {{ label }}
                                    </van-tag>
                                </p>
                            </div>
                        </div>
                    </van-tab>
                    <!-- +{{this.yawp.length}} -->
                    <van-tab title='不满意6'>
                        <div
                            class="ratings-nav-all"
                            v-for="item in yawp"
                            :key="item.rateTime"
                        >
                            <div class="ratings-nav-all-left">
                                <img :src="item.avatar" alt="" />
                            </div>
                            <div class="ratings-nav-all-right">
                                <p>
                                    <b>{{ item.username }}</b>
                                    <span>{{ item.rateTime |formatDateTime}}</span>
                                </p>
                                <p>
                                    <van-rate
                                        v-model="item.score"
                                        allow-half
                                        void-icon="star"
                                        void-color="#eee"
                                        color="#ff9a02"
                                    />&nbsp; {{ item.deliveryTime }}分钟送达
                                </p>
                                <p>
                                    {{ item.text }}
                                </p>
                                <p>
                                    <van-tag
                                        plain
                                        type="primary"
                                        text-color="#a9a9a9"
                                        v-for="label in item.recommend"
                                        :key="label"
                                    >
                                        {{ label }}
                                    </van-tag>
                                </p>
                            </div>
                        </div>
                    </van-tab>
                </van-tabs>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
interface IshopRatings {
    avatar?: string; //头像
    deliveryTime?: number; //送达时间
    rateTime?: number; //送达年月日
    rateType?: 0; //0满意1不满意
    recommend?: Array<string>; //点的菜
    score?: number; //用户评分
    text?: string; //用户评论
    username?: string; //用户名
}

import { Component, Vue } from "vue-property-decorator";
import { $_shopRatings, $_shopSeller } from "@/apis/goods";
import { ISeller } from "@/interface/goodsinterface";
import dayjs from 'dayjs'

@Component({
        filters:{
        formatDateTime(val){
            return dayjs(val).format('YYYY/MM/DD HH:mm:ss')
        }
    }
})
export default class Ratings extends Vue {
    shopRatings: Array<IshopRatings> = [];
    sellerData: ISeller = {};
    service: number = 3.6;
    mass: number = 4.5;
    meet: any = [];
    yawp: any = [];



    async created(): Promise<void> {
        let res = await $_shopRatings();
        let { data } = res;
        // console.log(data);
        this.shopRatings = data;
        // console.log(this.shopRatings);

        this.meetShopRatings();
        this.yawpShopRatings();

        let res2 = await $_shopSeller();
        // console.log(res2.data);
        this.sellerData = res2.data;
    }
    //满意用户
    meetShopRatings(): void {
        this.meet = this.shopRatings.filter((item) => {
            return item.rateType == 0;
        });
        console.log(this.meet);
        return this.meet;
    }
    //不满意用户
    yawpShopRatings(): void {
        this.yawp = this.shopRatings.filter((item) => {
            return item.rateType == 1;
        });
        console.log(this.yawp);
        return this.yawp;
    }
}
</script>

<style scoped lang="scss">
.ratings {
    .ratings-scroll {
        overflow: scroll;
        height: 100%;
        .ratings-score {
            display: flex;
            background: #fff;
            height: 110px;
            padding: 20px 0;
            margin-bottom: 20px;
            .ratings-score-left {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-evenly;
                border-right: 1px solid #f4f5f7;
                padding: 0 7px;
                span {
                    &:nth-of-type(1) {
                        color: #ffc300;
                        font-size: 25px;
                    }
                }
            }
            .ratings-score-right {
                flex: 1;
                display: flex;
                flex-direction: column;
                padding-left: 15px;
                justify-content: space-between;
                p {
                    span {
                        margin-right: 10px;
                    }
                    b {
                        color: #9b9b9b;
                        font-weight: 400;
                    }
                }
            }
        }
        .ratings-nav {
            background: #fff;
            padding: 18px 7px;
            .van-tab__pane {
                padding: 20px;
                .ratings-nav-all {
                    display: flex;
                    padding: 20px 0;
                    border-bottom: 1px solid #707070;
                    .ratings-nav-all-left {
                        width: 60px;
                        margin-right: 12px;
                        img {
                            border-radius: 50%;
                            width: 100%;
                        }
                    }
                    .ratings-nav-all-right {
                        flex: 1;
                        p {
                            margin-bottom: 10px;
                            &:nth-child(1) {
                                display: flex;
                                justify-content: space-between;
                                span {
                                    color: #a9a9a9;
                                }
                            }
                            &:nth-child(2) {
                                color: #a9a9a9;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>